<template>
    <div id="app">
        <div class="container">
            <div class="c-logo">
                <img src="../../assets/logo.png" alt="">
            </div>
            <div class="c-left">
                <ul>
                    <li v-for="(contact, index) in contacts" :key="index">
                        {{ contact.info }}
                    </li>
                </ul>
            </div>
            <div class="c-center">
                <img src="../../assets/logo2.png" alt="">
            </div>
            <div class="c-right">
                <div class="item">
                    <img src="../../assets/left.png" alt="">
                    <img src="../../assets/right.png" alt="">
                </div>
            </div>
            <div class="c-ewm">
                <img src="../../assets/ewm.jpg" alt="">
            </div>
            <div class="c-footer">
                copyright @2022山东城市服务职业学院版权所有
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 使用 ref 创建响应式数据
const contacts = ref([
    { info: '办公电话：0535-2246666' },
    { info: '招生咨询：0535-2246625' },
    { info: '官方网站：www.sdcc.edu.cn' },
    { info: '电子邮箱：sdccxy@126.com' },
    { info: '学校地址：山东省烟台市高新区海天路1001号' },
]);
</script>

<style scoped lang="scss">
#app {
    padding: 6px 0;
    background-image: url(../../assets/footer.jpg);
    background-repeat: no-repeat;
    @media (max-width: 468px) {
        background-repeat: repeat;
        padding: 30px 0 0;
    }
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 80%;
        height: 280px;
        margin: 0 auto;
        @media (max-width: 468px) {
            width: 90%;
            height: 320px;
        }
        .c-ewm{
            display: none;
            align-items: center;
            width: 30%;
            @media (max-width: 468px) {
                display: flex;
            }
            img{
                width: 80%;
                height: 90px;
            }
        }
        .c-logo{
            width: 100%;
            display: none;
            @media (max-width: 468px) {
                display: block;
                height: 60px;
            }
            img{
                width: 40%;
            }
        }
        .c-left{
            display: flex;
            align-items: center;
            width: 30%;
            height: 90%;
            color: #fff;
            font-size: 14px;
            @media (max-width: 468px) {
                width: 70%;
                font-size: 12px;
                height: 200px;
                margin-top: -20px;
            }
            ul{
                width: 100%;
                li{
                    width: 100%;
                    margin: 10px 0;
                    &:nth-child(1){
                        font-size: 20px;
                    }
                }
            }
        }
        .c-center{
            @media (max-width: 468px) {
                display: none;
            }
            display: flex;
            align-items: center;
            width: 50%;
            height: 90%;
            img{
                width: 70%;
            }
        }
        .c-right{
            @media (max-width: 468px) {
                display: none;
            }
            width: 10%;
            height: 90%;
            .item{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                img{
                    width: 30%;
                }
            }
        }
        .c-footer{
            // padding: 5px 0;
            width: 100%;
            border-top: 2px solid #4084c1;
            height: 10%;
            line-height: 20px;
            text-align: center;
            color: #fff;
            @media (max-width: 468px) {
                margin-top: 0px;
            }
        }
    }
}
</style>